{include file="admin@public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<style type="text/css">
    .webuploader-container {
        position: relative;
    }

    .webuploader-element-invisible {
        position: absolute !important;
        clip: rect(1px 1px 1px 1px);
        /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
    }

    .webuploader-pick {
        position: relative;
        display: inline-block;
        cursor: pointer;
        color: #fff;
        background: #31be3b;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
        width: 100%;
        height: 27px;
        line-height: 28px
    }

    .webuploader-pick-hover {
        background: #00a2d4;
    }

    .webuploader-pick-disable {
        opacity: 0.6;
        pointer-events: none;
    }

    .upload-backup-wrap p {
        margin-bottom: 20px;
        font-size: 12px;
        color: #797676;
        margin-top: 60px;
        margin-left: 60px;
    }

    .xzwj {

        margin-left: 60px;
        font-size: 18px;
    }
</style>

<div class="upload-backup-wrap">
    <p>可批量上传jpg、png、bmp、jpeg等图片文件</p>
    <div class="xzwj">
        <label for="file-path">选择文件：</label>
        <input type="text" name="file-path" id="file-path" class="ui-input" readonly autocomplete="false" />
        <span id="import-btn-wrap"><span id="import-btn" class="ui-btn mrb">浏览</span></span>
        <input type="file" id="mrb_a" multiple style="display: none">
    </div>
</div>
<script type="text/javascript">

    var body_files = null;
    var body_files_64 = [];
    function formData() {
        console.log(body_files_64);
        var filesdata = { body_files: body_files, body_files_64: body_files_64 };
        return filesdata;
    }
    $(document).ready(function () {

        $(".mrb").on("click", function () {
            $("#mrb_a").click();
        });

        // 1、先回去input标签
        var $input = $("#mrb_a");
        // 2、给input标签绑定change事件
        $input.on("change", function () {
            var files = this.files;
            body_files = files;
            var length = files.length;
            console.log("选择了" + length + "张图片");
            var filename = '';
            body_files_64 = [];
            //3、回显
            for (var i = 0; i < length; i++) {
                //console.log(files[i]);
                filename += files[i]['name'];
                filename += ';';

                if (window.FileReader) {
                    var fr = new FileReader();

                    fr.onload = function (e) {
                        //console.log("读取成功：",e)
                        body_files_64.push(e.target.result);
                    };
                    fr.readAsDataURL(files[i]);
                }
            }
            $("#file-path").val(filename);
            // console.log(files);

        })
    })

</script>

{include file="admin@public/footer"/}